<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="mapReady" @load="mapload" ref="map" ControlAnchor='BMAP_ANCHOR_TOP_RIGHT' name="newMap" :mapStyle="mapStyle">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-copyright
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :copyright="[{id: 1, content: '版权', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>版权归华雷船舶有限责任公司所有</a>'}]">
    </bm-copyright>
    </baidu-map>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
// let map = new BMap.Map("newMap")
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      mapStyle: {
        styleJson: [
          {
            'featureType': 'all',
            'elementType': 'geometry',
            'stylers': {
              'hue': '#007fff',
              'saturation': 89
            }
          },
          {
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
              'color': 'blue'
            }
          }
        ]
      },
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15
    }
  },
  computed: {
    ...mapState(['adminInfo']),
  },
  methods: {
    ...mapActions(['getAdminData']),
    mapReady (BMap, map) {
      // let baidumap = new BMap.Map('newMap')
      // let vm = this;
      console.log(BMap)
      console.log('ready event')
      // baidumap.setMapStyle({
      //   styleJson: vm.mapStyle
      // });
      // console.log(this.$refs.map.load())
    },
    mapload () {
      console.log('load event')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.map {
  width: 100%;
  height: 500px;
}
</style>
